<template>
  <div class="home px-10 bg-dark">
    <header class="home-header bg-white">
      <van-nav-bar
      right-text="前进"
      fixed
      >
        <!-- 城市 -->
        <van-dropdown-menu slot="left">
          <van-dropdown-item :title="city" ref="item">
            <van-tree-select
              height="100%"
              :items="cities"
              :active-id.sync="activeId"
              :main-active-index.sync="activeIndex"
              @click-nav="clickNav"
              @click-item="clickItem"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 搜索 -->
        <van-search placeholder="请输入搜索关键词" shape="round"  v-model="value" slot='title' style="padding:5px 0 0 40px;"/>
        <!-- 个人中心 -->
        <div slot="right" class="mb-1">
          <van-image
            round
            width="2.5rem"
            height="2.5rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            style="display: block;"
          />
        </div>
      </van-nav-bar>
    </header>
    <!-- 轮播图 -->
    <div class="home-lunbo mt-50">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in lubos" :key="index">
          <van-image round-4 :src="image" class="w-100" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <div class="mt-10">
      <van-swipe indicator-color="blue" class="pb-20">
        <van-swipe-item>
          <van-grid :border='false' square :column-num="5">
            <van-grid-item class="p-10" to="/category" v-for="v in 10" :key="v">
              <img height="40" src="https://img2.soyoung.com/origin/20190903/8/c8243758fb9e10b1f933229854100ff9_120_120.png?imageView2/0/format/webp" />
              <p class="mt-5 fs-13">面部轮廓</p>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid square :column-num="5">
            <van-grid-item class="p-10" to="/category" v-for="v in 10" :key="v">
              <img height="40" src="https://img2.soyoung.com/origin/20190903/8/c8243758fb9e10b1f933229854100ff9_120_120.png?imageView2/0/format/webp" />
              <p class="mt-5 fs-13">面部轮廓</p>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 推荐 -->
    <div class="w-100" style="over-flow:hidden;">
      <div class="" style="margin: 0 -10px; width: 250%;">
        <a class="px-10 py-5 shadow bg-white mx-10" href="#" style="display:inline-block;width:100px; border-radius: 0.3rem;"
        v-for="v in 7" :key="v"
        >
          <div class="text-left fs-14 text-ftcolor-3">医美百科</div>
          <div class="d-flex text-ftcolor-2 mt-5">
            <span class="fs-12">项目知识</span>
            <img class="ml-10" width='20' height="20" src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
          </div>
        </a>
      </div>
    </div>
    <!-- 广告 -->
    <div class="ads mt-10">
      <img class="w-100" src="//mstatic.soyoung.com/m/static/fe_m/view/home/img/consult-77afdf925b.jpg" alt="">
    </div>
    <!-- 项目 -->
    <div class="pro">
      <van-tabs>
        <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
          <div class="content d-flex flex-wrap" style="margin:0 -5px;">
            <div class="content-box my-10 mx-5 bg-white pb-10" style="width:47%;"
            v-for="v in 5" :key="v"
            >
              <img style="width:100%;border-radius:1rem;" src="../assets/logo.png" alt="">
              <p class="title fs-14 p-10 text-dark">阔别央视两年，万众期待的女神首次回归，下巴</p>
              <div class="d-flex jc-between ai-center px-10">
                <div>
                  <img class="avatar" src="" alt="">
                  <span class="fs-12 text-info ml-2">弥斯洋</span>
                </div>
                <div>
                  <i class="text-info">♥</i>
                  <span class="fs-12 text-info ml-2">152</span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Toast, Dialog} from 'vant';
import MyCity from '@/components/common/city.vue'

export default {
  name: 'home',
  components: {
    MyCity
  },
  data() {
    return {
      cities: [],
      activeId: '1',
      activeIndex: 0,
      city: '全国城市',
      value: '',
      lubos: Array(6).fill('https://img2.soyoung.com/origin/20190110/7/80b2acfb51b8a27f748d862a0eaef9d0.jpg?imageView2/0/format/webp')
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      let res = await this.$axios.get('/api/itemcity/product?lver=7.8.0')
      
      this.cities = res.data.responseData.city.map(v => {
        return {
          text: v.name,
          children: v.son.map(item => {
            return {
              text: item.name,
              id: item.id,
              pinyin: item.pinyin
            }
          })
        }
      })
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    clickNav(index) {
      this.activeIndex = index
    },
    clickItem(data) {
      this.activeId = data.id
      this.city = data.text
      this.$refs.item.toggle();
    }
  }
}
</script>
